<template>
	<!-- 综合防治 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">风险预警统计分析</text></view>
				</template>
				<view class="list-title">近30天预警次数累计
					<view class="list-conten">88次</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="radar" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违统计</text></view>
				</template>
				<view class="list-title">近30天三违行为累计
					<view class="list-conten">88次</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">风险态势统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">隐患类型统计</text></view>
				</template>
				<view class="line-list" v-for="(item, index) in list" :key="index">{{item.name}}
					<view class="list-conten">{{item.value}}</view>
					<u-line-progress :percentage="item.value" height="10" :showText="false"
						activeColor='#4C82FF'></u-line-progress>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4])

	const list = ref([{
		name: '水灾',
		value: 10
	}, {
		name: '火灾',
		value: 20
	}, {
		name: '粉尘',
		value: 80
	}, {
		name: '矿压',
		value: 60
	}, {
		name: '啦啦啦啦啦',
		value: 80
	}, {
		name: '其他',
		value: 80
	}])

	const chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false,
			},
			extra: {
				radar: {
					gridType: "radar",
					gridColor: "#CCCCCC",
					gridCount: 3,
					opacity: 0.2,
					labelShow: true,
					border: true
				}
			}
		},
		opts2 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: false,
			},
			title: {
				name: "88",
				fontSize: 40,
				color: "#0853FF",
				offsetY: -5
			},
			subtitle: false,
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		opts3 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				showTitle: true,
				data: [{
					min: 0,
					axisLine: false,
					title: '个',
					titleOffsetX: -10,
					titleOffsetY: -5
				}]
			},
			extra: {
				column: {
					type: "group",
					width: 25,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "opacity",
					linearOpacity: 0.1,
				}
			}
		}


	const getServerData = () => {
		setTimeout(() => {
			let res1 = {
				categories: ["瓦斯", "边坡", "水文", "粉尘", "湿度", "CO"],
				series: [{
					name: "",
					data: [90, 110, 165, 195, 187, 172]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));

			let res2 = {
				series: [{
					data: [{
						name: "违章作业",
						value: 36,
					}, {
						name: "违章指挥",
						value: 36
					}, {
						name: "违章劳动记录",
						value: 16
					}]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));

			let res3 = {
				categories: ["低风险", "一般风险", "较大风险", "重大风险"],
				series: [{
					name: "目标值",
					data: [12, 42, 30, 30]
				}]
			};
			chartData3.value = JSON.parse(JSON.stringify(res3));

		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
</style>